<template>
  <div class="resource">
    <el-card shadow="hover">
      <div>
        <i class="el-icon-search" />
        <span>筛选搜索</span>
        <el-button
          style="margin-left:20px;"
          icon="el-icon-search"
          type="primary"
          size="mini"
          @click="search"
        >
          搜索
        </el-button>
        <el-button
          icon="el-icon-refresh-right"
          size="mini"
          plain
          @click="cancelData"
        >
          重置
        </el-button>
      </div>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-form
          ref="params"
          :model="params"
          label-width="130px"
          size="mini"
          class="searchForm"
        >
          <el-col :span="6">
            <el-form-item label="证书名称:" prop="certificateName">
              <el-input
                v-model="params.certificateName"
                size="small"
                clearable
                @clear="search"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="咨询公司:" prop="state">
              <el-select
                v-model="params.userCompany"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in consultList"
                  :key="item.id"
                  :label="item.companyName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="到期日期:" prop="createTime">
              <el-date-picker
                v-model="params.range"
                type="datetime"
                placeholder="选择日期"
                @change="search"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
    <div class="container">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="certificateName"
          label="证书名称"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column align="center" prop="companyName" label="公司名称"></el-table-column>
        <el-table-column
          prop="dockingPeople"
          label="对接人"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="dockingPhone"
          label="联系电话"
          align="center"
        ></el-table-column>
        <el-table-column label="到期时间" prop="edHisDate" align="center">
        </el-table-column>
        </el-table>
      <!-- </el-card> -->
      <div class="pagination">
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="params.pageNum"
          :limit.sync="params.pageSize"
          @pagination="getData00"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  orderReceive_List,
  updateOrder,
  updateProcess1,
  queryProcess
} from "@/api/expire/index";
import { getToken } from "@/utils/auth";
export default {
  components: {},
  props: [],
  data() {
    return {
      cateList2: [],
      // 非多个禁用
      multiple: true,
      //删除
      ids: [],
      headers: { Authorization: "Bearer " + getToken() },
      upImage: process.env.VUE_APP_BASE_API,
      title666: "",
      rules2: {
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        companyName: [
          { required: true, message: "请输入公司名称", trigger: "blur" }
        ],
        linkman: [
          { required: true, message: "请输入联系人名称", trigger: "blur" }
        ],
        businessLicense: [
          { required: true, message: "请上传图片", trigger: "blur" }
        ]
      },
      input: "",
      openFlag: true,
      loading: true,
      //数据
      tableData: [],
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      consultList: [
      ],
      stateOptions: [
        {
          id: 1,
          title: "待审批"
        },
        {
          id: 3,
          title: "审批通过"
        },
        {
          id: 2,
          title: "审批驳回"
        }
      ],
      pageTotal: 0,
      dialogVisible: false, // 是否展示编辑页面
      // 新增/编辑数据
      formData: {
        businessLicense: ""
      },
      customer: {
        customerId: ""
      },
      paramsFlag: 0,
      editFlags: false,

      checkVisible: false,
      checkForm: {
        remarks: ""
      },
      checkRules: {
        remarks: [
          { required: true, message: "审批驳回原因不能为空", trigger: "blur" }
        ]
      },
      zixunPrice: "",
      isedit: true
    };
  },
  computed: {},
  created() {
    this.getData00();
    this.getCom()
  },
  mounted() {
    this.getDicts("money_zixun").then(response => {
      this.zixunPrice = response.data[0].dictValue;
    });
  },
  watch: {},
  methods: {
    // 触发流程
    process(row) {
      updateProcess1({
        orderId: row.id,
        flowSerial: 2,
        context:'',
        accessory: '',
        finish: 1,
        flowList:row.certificateOrderList.map(item => {
          return{
            orderId:item.id,
            flowSerial: 2,
            context: '',
            accessory: '',
            finish: 1,
          }
        })
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.getData00();
        }else{
          this.$message.error("操作失败");
        }
      });
    },
    payMoney() {
      console.log("此处增加微信网页支付");
    },
    getCom() {
        queryProcess({pageNum:1,pageSize:10000}).then(res => {
        if (res.code == 200) {
          this.consultList = res.rows;
        }
      });
    },
    //获取数据
    getData00() {
      orderReceive_List(this.params).then(res => {
        if (res.code == 200) {
          this.tableData = res.rows;
          this.pageTotal = res.total;
          this.loading = false;
        }
      });
    },
    // 审批通过
    handlePass(row) {
      let query = row;
      console.log(query);
      this.$confirm("确认审批通过?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        query.state = 3;
        updateOrder(query).then(res => {
          if (res.code == 200) {
            this.process(row);
          }
        });
      });
    },
    querySearch(queryString, cb) {
      console.log(queryString, this.cateList2);
      var restaurants = this.cateList2;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.categoryName
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    // 键值配对
    status(val) {
      var str = this.stateOptions.find(function(item) {
        return item.id == val;
      });
      if (str) return str.title;
    },
    status_consult(val){
      let str = this.consultList.find(function(item){
        return item.id == val;
      })
      if(str) return str.title;
    },
    // 键值配对
    status2(val) {
      var str = this.cateList2.find(function(item) {
        return item.id == val;
      });
      if (str) return str.categoryName;
    },
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.formData.businessLicense = res.url;
        console.log(this.formData.businessLicense);
        this.$message.success(`上传成功`);
      }
    },
    // 打开搜索
    openSearch() {
      this.openFlag = !this.openFlag;
    },
    // 重置搜索框
    cancelData() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
        state: 1
      }
      this.resetForm("params");
      this.getData00();
    },

    // 触发搜索按钮
    search() {
      this.$set(this.params, "pageNum", 1);
      this.paramsFlag = 0;
      this.getData00();
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.params, "pageNum", val);
      this.getData00();
    }
  }
};
</script>

<style scoped>
.resource {
  padding: 20px 30px;
}
.container {
  margin-top: 20px;
}
.handle-box {
  margin-bottom: 10px;
}

.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.yellow {
  color: #f57506;
}
.green {
  color: green;
  cursor: pointer;
}
.blue2 {
  color: #409eff;
}
.blue {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
.mr10 {
  margin-right: 10px;
}

.searchForm .el-form-item--mini.el-form-item,
.searchForm .el-form-item--small.el-form-item {
  margin-bottom: 1px;
}
.study_pic {
  display: block;
  width: 100px;
  height: 85px;
  margin: auto;
  /* border-radius: 50%; */
}
.avatar {
  display: inline-block;
  margin-right: 10px;
}
.avatar img {
  width: 200px;
}
.avatar6 {
  display: inline-block;
  margin-right: 10px;
  position: relative;
}
.avatar6 img {
  width: 200px;
}
</style>
